<template>
  <basicModal @register="register" ref="modalRef" @before-ok="okModal">
    <template #default>
      <a-space>
        <a-button type="primary" @click="closeModal">内部关闭弹窗</a-button>
        <a-button type="primary" @click="setTitle">设置标题试试</a-button>
      </a-space>
    </template>
  </basicModal>
</template>

<script lang="ts" setup>
  import { basicModal, useModal } from '@/components/Modal';
  import { Message } from '@arco-design/web-vue';

  const [register, { openModal, closeModal, setProps }] = useModal({
    title: '内部方法演示',
    showCancelBtn: false,
  });

  async function okModal() {
    Message.success('您点击了确定');
    closeModal();
  }

  function setTitle() {
    setProps({
      title: '我是一个新标题',
    });
    Message.success('设置成功');
  }

  //导出方法
  defineExpose({
    openModal,
  });
</script>
